* {
    background-color: dimgrey;

}

#board {
    border: 10px solid black;
    background-color: rgb(10, 0, 156);

    width: 765px;
    height: 765px;
    margin: 0 auto;

    display: flex;
    flex-wrap: wrap;
}

.placeable {
      z-index: 1;
    height: 15px;
    width: 15px;
    margin-top: 10px;
    margin-left: 30px;
    margin-bottom: 10px;
    margin-right: 30px;
    background-color: rgb(7, 1, 97);
    border-radius: 50%;
   
}
.spot {
    z-index: 1;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    margin-top: 10px;
    margin-left: 30px;
    margin-bottom: 10px;
    margin-right: 30px;

    background-color: transparent;
}

.slideSpot{
   z-index: 2;
    outline: 2px red;
    background-color: red;


}
.border{
      z-index: 1;
border: 5px solid rgba(7, 1, 97, 0);

}

.black{
      z-index: 1;
    height: 15px;
    width: 15px;
    margin-top: 10px;
    margin-left: 30px;
    margin-bottom: 10px;
    margin-right: 30px;
    background-color: #393939;
    border-radius: 50%;
    outline : 2px solid #7a7a7a;
}

.tan{
      z-index: 1;
    height: 15px;
    width: 15px;
    margin-top: 10px;
    margin-left: 30px;
    margin-bottom: 10px;
    margin-right: 30px;
    background-color: wheat;
    border-radius: 50%;
    outline: 3px solid #393939;
}

.selected{

        z-index: 5;
        border: 5px solid red; 

}
.empty {
      z-index: 0;
    height: 25px;
    width: 25px;
    margin-top: 10px;
    margin-left: 30px;
    margin-bottom: 10px;
    margin-right: 30px;
    background-color: rgb(10, 0, 156);
}


.hovered {
      z-index: 1;
    border: 5px solid transparent;
    outline: 2px solid white;
}

#boardLines{

     z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;  
  background: transparent;
}